<template>
    <div style="width: 100%; height: 100%;" id="radar"></div>
</template>
<script>
import * as echarts from "echarts";
import request from "@/utils/request";

export default {
    name: "pieAnalyse",
    data() {
        return {
            chart: [],
            chartInstance: null
        };
    },
    mounted() {
        this.getData();
        window.addEventListener("resize", this.handleResize);
    },
    methods: {
        handleResize() {
            if (this.chartInstance) {
                this.chartInstance.resize();
            }
        },
        async getData() {
            const { data: res } = await request.get("/views/categoryBorrowCount");

            for (let i = 0; i < 5; i++) {
                let obj = {};
                obj.name = res[i].category;
                obj.value = res[i].count;
                this.chart[i] = obj;
            }

            this.echartsInit();
        },
        echartsInit() {
            let chart = [];
            chart = this.chart;

            this.chartInstance = echarts.init(
                document.getElementById("radar"),
                null,
                { responsive: true }
            );

            this.chartInstance.setOption({
                title: {
                    text: "读者爱好分析",
                    left: "right",
                    textStyle: {
                        color: "#fff"
                    }
                },
                tooltip: {
                    trigger: "item"
                },
                legend: {
                    orient: "vertical",
                    left: "left",
                    textStyle: {
                        color: "#248, 248, 250"
                    }
                },
                series: [
                    {
                        name: "人数",
                        type: "pie",
                        radius: "50%",
                        data: chart,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)"
                            }
                        }
                    }
                ]
            });
        }
    }
};
</script>
<style scoped>
</style>
